<template>
  <!--  监测设备管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-cascader :props="propsCascader" ref="refHandle" filterable clearable v-model="selectedOptions" change-on-select
                   placeholder="请选择项目/监测对象"></el-cascader>
      <el-input v-model="form.name" clearable>
        <template slot="prepend">监测点名称</template>

      </el-input>
      <el-select v-model.trim="form.warningLevel" clearable placeholder="选择预警等级">
        <el-option v-for="item in EnumWarningLevelList" :key="item.code" :label="item.name"
                   :value="item.code"></el-option>
      </el-select>

      <el-select v-model="form.onlineStatus" clearable placeholder="选择在线状态"  @change="handleSelectChange">
        <el-option v-for="item in onlineStatusList" :key="item.code" :label="item.name"
                   :value="item.code"></el-option>

      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>

    <div class="page_main">
      <el-radio-group v-model="form.monitorType" @change="form.page=1;queryList()" style="margin-bottom: 20px">
        <el-radio-button label=""><i class="iconfont icongongyinglianziliao radio-button_icon"></i>所有类型
        </el-radio-button>
        <el-radio-button v-for="item in ProjectMonitorType" :key="item.code" :label="item.code">
          <i  class="iconfont radio-button_icon" :class="item.code | gradeMonitorType"></i>{{item.name}}
        </el-radio-button>
      </el-radio-group>
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" show-overflow-tooltip label="项目名称" min-width="145">
        </el-table-column>
        <el-table-column prop="workPointName" show-overflow-tooltip label="监测对象" min-width="165">
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="监测点位" min-width="165">
        </el-table-column>
        <el-table-column prop="caseCode" sortable label="设备编号" min-width="145">
        </el-table-column>
        <el-table-column prop="warningLevelName" label="预警等级" width="105">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.warningLevel | gradeColor">{{scope.row.warningLevelName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="warningLevelName" label="在线状态" width="160">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.onlineStatus" size="mini" :style="scope.row.onlineStatus | equipStatusColor" style="color: white">
              <span v-if=" scope.row.onlineStatus==1">在线</span>
              <span v-else-if=" scope.row.onlineStatus==2">离线</span>
              <span v-else-if=" scope.row.onlineStatus==3">无设备</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="monitorTypeName" label="监测类型" min-width="160">
          <template slot-scope="scope">
            <i style="color: #1990FE" class="iconfont" :class="scope.row.monitorType | gradeMonitorType"></i>
            {{scope.row.monitorTypeName}}
          </template>
        </el-table-column>
        <el-table-column width="170" label="最新数据时间">
          <template slot-scope="scope">{{scope.row.collectionTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="130">
          <template slot-scope="scope">
            <el-button type="text" class="btn_jump" @click="clickData(scope.row)">
              查看监测数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
      </el-pagination>
    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>

<script>
import {getMonitorPointList, projectSelect, workSelect} from '@/services/model/project-info'
import Enums from '@/utils/enums'
import Format from '@/utils/format'
import XLoading from '@/components/animation/x-loading.vue'
import {actions} from "./work-point.store";

export default {
  components: {XLoading},
  mixins:[Enums],
  data() {
    return {
      // 接口正在加载
      isLoading: false,
      form: {
        page: 1,
        pageSize: 10,
        monitorType:'',
        total: 0,
      },
      currentRow: {},
      tableList: [],
      ProjectMonitorType: [],
      EnumWarningLevelList:[],
      onlineStatusList:[{name:"在线",code:"1"},{name:"离线",code:"2"},{name:"无设备",code:"3"}],
      selectedOptions: [],
      propsCascader: {
        lazy: true,
        label: 'name',
        value: 'id',
        lazyLoad(node, resolve) {
          const {
            level,
            data
          } = node
          if (level === 0) {
            projectSelect().then(res => {
              const {
                data
              } = res
              resolve(data)
            })
          } else if (level === 1) {
            workSelect({
              id: data.id
            }).then(res => {
              const {
                data
              } = res
              resolve(data)
            })
          } else {
            resolve([])
          }
        }
      },
    }
  },
  watch: {
    //任选一级时，自动关闭选项框
    selectedOptions() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    }
  },
  filters: {

    gradeColor(val) {
      switch (val) {
        case 2:
          return 'background-color:#0073b7;color:white'
        case 3:
          return 'background-color:#f39c12;color:white'
        case 4:
          return 'background-color:#ff851b;color:white'
        case 5:
          return 'background-color:#e43321;color:white'
        default:
          return 'background-color:#0DC26B;color:white'
      }
    },
    gradeMonitorType(val) {
      let iconMap = {
        1: 'iconshenbuweiyicexieyi',
        2: 'iconGNSS',
        3: 'iconlaxianweiyi',
        4: 'iconjiangyuliang',
        5: 'icondixiashuiwei',
        6: 'iconmaosuochuanganqi',
        7: 'iconjinglishuizhunyi2',
        8: 'iconqingjiao',
        9: 'iconxianxingtu',
        10: 'iconshidu',
        11: 'iconfengsufengxiangjiance',
        12: 'icondiyingli',
        13: 'iconzhendong',
        14: 'iconjianshiqicai01',
        15: 'iconGNSS',
        16: 'iconjianshiqicai01',
        17: 'iconzhendong',
        18: 'iconleida',
        19: 'iconshengguangbaojing',
        20: 'icona-fenzu1',
        21: 'iconzhendong',
        22: 'icondb_fill',
        23: 'iconzhendong',
      }
      return iconMap[val]
    },
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer))
      }
      return ''
    },
    equipStatusColor(val) {
      switch (val) {
        case 1:
          return 'background-color:#0DC26B'
        case 2:
          return 'background-color:#e43321'
        default:
          return 'background-color:#03a9f4'
      }
    },
  },
  methods: {
    handleSelectChange(value) {
      this.$forceUpdate()
      console.log('选中的预警等级的值是：', value);
      // 在这里可以执行其他逻辑
      // 例如，基于选择更新其他表单项或触发API调用等
    },
    // 最新数据行点击
    async clickData(row) {
      await actions.queryProjectInfo(row.projectId)
      await actions.queryWorkPointList(row.projectId)
      this.$router.push({
        path: `/project/${row.projectId}/data-share?activeId=${row.id}&monitorType=${row.monitorType}&workPointId=${row.workPointId}`
      })
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      if (this.selectedOptions.length === 0) {
        this.form.projectId = ''
        this.form.workPointId = ''
      }
      // 级联选择器处理
      this.selectedOptions.forEach((item, index, arr) => {
        if (item) {
          if (index === 0) {
            this.form.projectId = item
          } else {
            this.form.workPointId = item
          }
        }
      })
      this.isLoading = true
      let res = await getMonitorPointList(this.form)
      this.tableList = res.data?.records
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
  },
  activated() {
this.form.onlineStatus =this.$route.query.onlineStatus
    this.queryList()
  },
  mounted() {
    this.queryDictList(['EnumWarningLevel','EnumProjectMonitorType'], ['EnumWarningLevelList', 'ProjectMonitorType'])
  }
}
</script>

<style scoped="scoped" lang="less">
  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background: #1b1b1b;
  }
  .btn-other {
    color: #e6a23c;
  }

  .btn_jump {
    color: #00d600;
  }

  .equip_label {
    color: #1990FE;
    font-size: 10px;
    padding: 2px 0 3px 10px;

    .info {
      color: #000000;
      margin-left: 5px;
    }
  }
</style>
